import {createForm} from 'rc-form'
import {MyNavBar} from '@/components'
import {Button, TextareaItem, InputItem, List, Picker, Calendar, Tag, Toast} from 'antd-mobile'
import React, {useState} from 'react'
import {history} from 'umi'

import './index.less'
import {useDetailHook} from '@/hooks'
import {_getPersonList, _postAppointment} from './store'
import {queryString, timer} from '@/utils'

function AppointmentAdd(props) {
  const {getFieldProps, validateFields} = props.form

  const [ createdAt, setCreatedAt ] = useState([])

  const [ dateShow, setDateShow ] = useState(false)

  const {detailData: personList} = useDetailHook({func: _getPersonList})

  const [ person, setPerson ] = useState([])

  const id = queryString('id')
  if (!id) {
    Toast.success('参数错误')
    history.goBack()
  }

  const handleDate = () => {
    setDateShow(!dateShow)
  }

  const handleDateConfirm = (startTime, endTime) => {
    setCreatedAt([ timer(startTime, 'YYYY-MM-DD'), timer(endTime, 'YYYY-MM-DD') ])
    handleDate()
  }

  const handleSubmit = () => {
    validateFields(async (err, val) => {
      if (err || !person || !createdAt.length) {
        Toast.fail('请将信息补充完整')
        return
      }

      const result = await _postAppointment({
        ...val,
        persons: person.join(),
        startTime: createdAt[0],
        endTime: createdAt[1],
        houseId: id
      })

      if (result) {
        Toast.success('预约成功,请等待房东回复')
        history.goBack()
      }
    })
  }

  const handleChange = (id, bool) => {
    if (bool) {
      setPerson(person.concat([ id ]))
    } else {
      const index = person.indexOf(id)
      setPerson(person.slice(0, index).concat(person.slice(index + 1)))
    }
  }

  return (
    <div className='appointment-add'>
      <MyNavBar title='预约'/>
      <List>
        <InputItem {...getFieldProps('phoneNum', {
          initialValue: ''
        })} placeholder='手机号'>手机号</InputItem>
        <TextareaItem
          title='备注'
          {...getFieldProps('comment', {
            initialValue: ''
          })} placeholder='备注'
        />
        <div className='search-time' onClick={handleDate}>
          <p className='search-time_left'>出租时间</p>
          <p className='search-time_right'>{createdAt?.length ? (createdAt[0] + '~' + createdAt[1]) : '请选择时间'}</p>
        </div>
        <div className='search-time'>
          <p className='search-time_left'>入住人</p>
          <div className='search-time_right'>
            {personList?.length ? personList.map(item => (
              <Tag style={{marginRight: '3px'}} key={item.id} onChange={(bool) => {
                handleChange(item.id, bool)
              }}>{item.name}</Tag>
            )) : ''}
          </div>
        </div>
        <Button type='warning' onClick={handleSubmit} style={{marginTop: '20px'}}>预约</Button>
      </List>
      <Calendar
        visible={dateShow}
        onCancel={handleDate}
        onConfirm={handleDateConfirm}
        minDate={new Date()}
      />
    </div>
  )
}

export default createForm()(AppointmentAdd)

